<script>
export default {
  name: 'Knife4jIndex',
  data() {
    return {
      // 系统服务列表
      services: [
        {
          name: 'ruoyi-system',
          port: '9201',
          desc: '系统管理服务'
        },
        {
          name: 'ruoyi-job',
          port: '9203',
          desc: '定时任务服务'
        },
        {
          name: 'ruoyi-auth',
          port: '9200',
          desc: '认证授权服务'
        },
        {
          name: 'ruoyi-file',
          port: '9202',
          desc: '文件管理服务'
        },
        {
          name: 'ruoyi-gen',
          port: '9204',
          desc: '代码生成服务'
        }
      ]
    }
  },
  methods: {
    // 获取服务的 OpenAPI 文档 URL
    getDocUrl(port) {
      return `http://localhost:${port}/doc.html`
    },
    
    // 在新标签页打开文档
    openDoc(url) {
      window.open(url, '_blank')
    }
  }
}
</script>

<template>
  <div class="knife4j-container">
    <div class="page-header">
      <h2>OpenAPI 文档中心</h2>
      <p>点击下方服务名称访问对应的 OpenAPI 文档</p>
    </div>
    
    <div class="services-list">
      <el-card
        v-for="service in services"
        :key="service.name"
        class="service-card"
        :body-style="{ padding: '20px' }"
      >
        <div class="service-info">
          <h3 class="service-name" @click="openDoc(getDocUrl(service.port))">
            {{ service.name }}
            <i class="el-icon-link link-icon"></i>
          </h3>
          <p class="service-desc">{{ service.desc }}</p>
          <div class="service-meta">
            <span class="port-info">端口: {{ service.port }}</span>
            <el-button 
              type="primary" 
              size="small"
              @click="openDoc(getDocUrl(service.port))"
              class="view-btn"
            >
              查看文档
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.knife4j-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;

  h2 {
    color: #303133;
    font-size: 28px;
    margin-bottom: 10px;
  }

  p {
    color: #606266;
    font-size: 16px;
  }
}

.services-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.service-card {
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

.service-info {
  .service-name {
    font-size: 20px;
    color: #409eff;
    margin-bottom: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &:hover {
      text-decoration: underline;
    }

    .link-icon {
      font-size: 16px;
    }
  }

  .service-desc {
    color: #606266;
    margin-bottom: 15px;
  }

  .service-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;

    .port-info {
      color: #909399;
      font-size: 14px;
    }
  }
}
</style>
